import styles from "../styles/showMessage.module.less";

const classMap = {
  success: "iconzhengque",
  error: "iconcuowu",
  warn: "iconjinggao",
  info: "iconxinxi",
};

export default function (options) {
  const content = options.content;
  const container = options.container || document.body;
  const duration = options.duration || 2000;
  const type = options.type || "info";
  const callback = options.callback;

  if (options.container && getComputedStyle(container).position === "static") {
    container.style.position = "relative";
  }

  const message = document.createElement("div");
  message.className = `${styles.message} ${styles[type]}`;
  const icon = document.createElement("i");
  icon.className = `${styles.iconfont} ${styles[classMap[type]]} ${styles.icon}`;
  const span = document.createElement("span");
  span.innerHTML = content;

  message.appendChild(icon);
  message.appendChild(span);
  container.appendChild(message);

  message.clientHeight;
  message.style.transform = "translate(-50%, -50%)";
  message.style.opacity = 1;

  message.addEventListener("transitionend", () => {
    setTimeout(() => {
      message.style.transform = "translate(-50%, -50%) translateY(-50px)";
      message.style.opacity = 0;
      message.addEventListener("transitionend", () => {
        message.remove();
        callback && callback();
      }, {
        once: true
      });
    }, duration);
  }, {
    once: true
  })
}
